<template>
	<view class="main">
		<header>
			<button :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%);`}" @tap="back">编辑</button>
			<text>预览</text>
			<button :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%);`}" @tap="submit">完成</button>
		</header>
		<main>
			<view class="title" @tap="showComment = false">
				<span>{{preData.title.val}}</span>
				<span class="author">{{user}}</span>
			</view>
			<view v-for="(item, index) in preData.dtl" :key="index" class="cards-list">
				<!-- 图片 -->
				<view v-if="item.type == 'image'" class="card">
					<image :src="item.src" mode="widthFix" class="view-image" @tap="previewImg(item.src)"></image>
					<rich-text :nodes="item.val"></rich-text>
				</view>
				<!-- 文字 -->
				<view v-else-if="item.type == 'text'" class="card">
					<rich-text :nodes="item.val"></rich-text>
				</view>
				<!-- 视频 -->
				<view v-else-if="item.type == 'video'" class="card">
					<view class="media-border">
						<video :src="item.src" class="media-item"></video>
					</view>
					<rich-text :nodes="item.val"></rich-text>
				</view>
				<!-- 音频 -->
				<view v-else-if="item.type == 'record'" class="card">
					<imt-audio 
						:src="item.src" 
						:duration="item.duration" 
						:autoplay="false"
						:control="false" 
						class="audio-item">
					</imt-audio>
					<rich-text :nodes="item.val"></rich-text>
				</view>
			</view>
		</main>
	</view>
</template>

<script>
	import upload from '@/util/upload.js'
	
	export default{
		props:{
			viewData: Object,
			eassyId: String
		},
		data(){
			return{
				theme: this.$theme,
				//用户信息
				user:'',
				//美篇数据
				preData: {}
			}
		},
		created() {
			//用户信息
			this.user = this.$store.state.user.user
			//美篇数据
			this.preData = this.viewData.dtl
		},
		methods:{	
			//预览美篇时 数据提交
			submit(){
				this.$emit('submit', this.preData)
			},
			//预览美篇时 返回编辑
			back(){
				this.$emit('back')
			},
			// 图片预览
			previewImg(src){
				let urls = []
				this.preData.dtl.filter(item=>item.type == 'image').map(e=>{
					urls.push(e.src)
				})
				uni.previewImage({
					current: src,
					urls: urls
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	rich-text{
		font-size: 35rpx;
		letter-spacing: 2rpx;
		text-indent: 70rpx;
		line-height: 80rpx;
	}
	@keyframes fadeIn{
		0%{
			transform: translateX(100vw);
		}
		100%{
			transform: translateX(0);
		}
	}
	.main{
		position: fixed;
		top:0;
		left: 0;
		overflow-y: auto;
		overflow-x: hidden;
		width: 100vw;
		height: 100vh;
		z-index: 1000;
		background-color: #fff;
		animation: 0.3s fadeIn;
		header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx 20rpx 30rpx;
			border-bottom: 1rpx solid #efefef;
			button{
				color: #fff;
				width: 130rpx;
				height: 50rpx;
				font-size: 30rpx;
				border-radius: 40rpx;
				margin: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		main{			
			padding: 10rpx 30rpx 10rpx 30rpx;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;
			.title{
				width: 100%;
				height: 200rpx;
				font-size: 40rpx;
				margin: 30rpx 0 30rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.author{
					font-size: 30rpx;
					color: #434343;
					padding: 20rpx;
				}
			}
			.cards-list{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-direction: column;
				.card{
					display: flex;
					justify-content: center;
					align-items: flex-start;
					flex-direction: column;
					width: 90vw;
					height: auto;
					margin: 10rpx 0 50rpx 0;
					word-wrap: break-word;
					word-break: break-all;
					overflow-x: hidden;
					.media-border{
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 30rpx 0 10rpx 0;
					}
					.media-item{
						width: 100vw;
					}
					.view-image{
						width: 90vw;
						margin: 30rpx 0 10rpx 0;
					}
					.audio-item{
						width: 100%;
						margin: 30rpx 0 10rpx 0;
					}
				}
			}
		}
	}
</style>
